<template>
    <div class="message-cont">
       <div class="main" v-if="accesstoken">
           <mu-appbar class="header" title="我的消息"></mu-appbar>
           <!--未读消息-->
           <mu-list-item class="list-item" title="未读消息" v-if="readMsg.hasnot_read_messages" toggleNested :open="false">
                <mu-icon slot="left" value="visibility_off" />
                <mu-list-item class="list-item-content" :to="{path:'/vue-home/dist/content',query:{id:item.topic.id}}" v-for="item in readMsg.hasnot_read_messages" :key="item.id" slot="nested" :title="item.title">
        
                </mu-list-item>
                <span class="msg-num">{{readMsg.hasnot_read_messages.length}}</span>
          </mu-list-item>
           <!--已读消息-->
          <mu-list-item class="list-item" v-if="readMsg.has_read_messages" title="已读消息" toggleNested :open="false">
            <mu-icon slot="left" value="visibility" />
            <mu-list-item class="list-item-content" :to="{path:'/vue-home/dist/content',query:{id:item.topic.id}}" v-for="item in readMsg.has_read_messages" :key="item.id" slot="nested" :title="item.title">
              <span>来自<strong>{{item.author.loginname}}</strong></span>
              <span class="message-time">{{item.reply.create_at| formatDate}}</span><br>
              <p class="message-content">{{item.reply.content}}</p>
              <span class="message-title">帖子：《{{item.topic.title}}》</span>
              <span class="message-ups">获{{item.reply.ups.length}}个赞</span>
            </mu-list-item>
            <span class="msg-num">{{readMsg.has_read_messages.length}}</span>
          </mu-list-item>
       </div>
       <div v-if="!accesstoken" class="message-tip">
            <mu-raised-button to="/vue-home/dist/login" label="请先登录" class="demo-raised-button" primary/>
       </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        data () {
            return {
                accesstoken: '',
                url: 'https://www.vue-js.com/api/v1/messages?accesstoken=',
                readMsg: {}
            }
        },
        created() {
            this.accesstoken = localStorage.getItem("accesstoken")
            this.getData()
        },
        methods: {
            getData() {
                axios.get(this.url + this.accesstoken)
                .then(response=>{
                    this.readMsg = response.data.data
                    console.log( this.readMsg)
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .message-cont{
        display: flex;
        flex-direction: column;
        height: 100vh;
        .header{
            position: fixed;
            top: 0;
            height: 4.5rem;
            text-align: center;
        }
        .main{
            padding-top: 4rem;
        }
        .message-tip {
            text-align: center;
            font-size: 2.0rem;
            line-height: 100vh;
        }
        .list-item {
        text-align: left;
        margin-top: 1rem;
        .list-item-content {
          position: relative;
          border-bottom: 0.6rem solid #EFF2F7;
          margin: 0.6rem;
          .message-time {
            float: right;
          }
          .message-ups {
            float: right;
          }
        }
        .msg-num {
          background-color: #f5f5f5;
          font-size: .2rem block;
          padding: 0 0.6rem;
          border-radius: 100%;
          position: absolute;
          right: 4rem;
          top: 1.2rem;
        }
        mu-list-item {
          color: red;
          background-color: red;
        }
      }
    }
    
</style>